<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>QQ音乐</title>
	<link rel="stylesheet" href="./fonts/iconfont.css">
	<link rel="stylesheet" href="./style/bootstrap-theme.min.css">
	<link rel="stylesheet" href="./style/bootstrap.min.css">
	<link rel="stylesheet" href="./style/index.css">
	<link rel="stylesheet" href="./style/swiper.min.css">
	<link rel='SHORTCUT ICON' href='images/favicon.ico'>
	<style>
	*{padding: 0;margin: 0;}
	.activeLis span{
		color: #31c27c;
	}
	.activeLis li{
		background: #31c27c;
		color: #fff;
	}
	.activeLis:hover li{
		color: #fff !important;
	}
	.icon-zengjia{
		font-size:14px;
		font-weight: bolder;
	}
	.icon-play{
		color: #fff;
	}
	h3{
		font-size:20px;
	}
	#login{
		position: relative;
		
	}
	#login p{
		width: 100px;
		height: 0px;
		position: absolute;
		left: 0px;
		font-size: 12px;
		padding: 0;
		margin: 0px;
		top: 38px;
		background: #ccc;
	}
	#login:hover p{
		color: #000;
	}
	#back{
		width: 100px;
		height: 40px;
		display: block;
	}
	 .people{
		 width: 100px;
		 height: 30px;
		 line-height: 30px;
		padding: 5px;
		color: green;
		display: inline-block;
	}
	.content{
		width: 400px;
		height: 30px;
		 line-height: 30px;
		padding: 5px;
		color: #444;
		display: inline-block;
	}
	.time{
		width: 150px;
		height: 30px;
		 line-height: 30px;
		padding: 5px;
		color: blue;
		display: inline-block;
	}
	</style>
	<link rel="stylesheet" type="text/css" href="./style/singer.css">
	<link rel="stylesheet" type="text/css" href="./style/album.css">
	<link rel="stylesheet" type="text/css" href="./style/playlist.css">
	<link rel="stylesheet" type="text/css" href="./style/mv.css">
	
</head>
<body>
	<div id="main"></div>
	<script src="bundle.js"></script>
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="js/docs.min.js"></script>
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.js"></script>
	<script type="text/javascript" src="./ehi/xheditor-1.2.2.min.js"></script>
	<script type="text/javascript" src="./ehi/xheditor_lang/zh-cn.js"></script>
	<script src="js/jquery.cookie.js"></script>
	
	<script>
		    var swiper = new Swiper('.lunbo1 .swiper-container', {
		        pagination: '.lunbo1 .swiper-pagination',
		        paginationClickable: true,
		        nextButton: '.swiper-button-next',
		        prevButton: '.swiper-button-prev',
		        parallax: true,
		        speed: 600,
		    });
		    var swiper = new Swiper('.lunbo2 .swiper-container', {
		        pagination: '.lunbo2 .swiper-pagination',
		        effect: 'coverflow',
		        grabCursor: true,
		        centeredSlides: true,
		        slidesPerView: 'auto',
		        coverflow: {
		            rotate: 50,
		            stretch: 0,
		            depth: 100,
		            modifier: 1,
		            slideShadows : true
		        }
		    });
		    var swiper = new Swiper('.lunbo3 .swiper-container', {
		        pagination: '.lunbo3 .swiper-pagination',
		        paginationClickable: '.swiper-pagination',
		        nextButton: '.swiper-button-next',
		        prevButton: '.swiper-button-prev',
		        spaceBetween: 30,
		        effect: 'fade'
		    });
	    	$(".list-box").mouseover(function(){
			   $(this).find($('.gogogo')).css('display','block');
			});
			$(".list-box").mouseleave(function(){
			   $(this).find($('.gogogo')).css('display','none');
			});
			$('.toplist-main-list').find($('li')).mouseover(function(){
				$(this).find($('.no-action')).stop().hide();
				$(this).find($('.action')).stop().show();
			});
			$('.toplist-main-list').find($('li')).mouseleave(function(){
				$(this).find($('.no-action')).stop().show();
				$(this).find($('.action')).stop().hide();
			});
				if(getCookie('usename')){
						$('#login').html('<span>'+getCookie('usename')+'</span><p>欢迎！'+getCookie('usename')+'<span id="back" onClick = "window.location.reload()">退出</span></p>').attr('href','##');
				}else{
						$('#login').html('登录')
				}
				$('#login').find('p').hide();
				$('#login').hover(function(){
					$('#login').find('p').show();
					$('#login').find('p').stop(true,true).animate({
						height:'100px'
					});	
				},function(){
					$('#login').find('p').show();
					$('#login').find('p').stop(true,true).animate({
						height:0
					},function(){
						$('#login').find('p').hide();
					});	
				})
			
			$('#back').click(function(){
				delCookie('usename',getCookie('usename'));
				if(getCookie('usename')){
					$('#login').html('<span>'+getCookie('usename')+'</span><p>欢迎！'+getCookie('usename')+'<span id="back" onClick = "window.location.reload()">退出</span></p>').attr('href','##');
			}else{
					$('#login').html('登录')
					$("#login").attr('href','./html/login.html');
			}
			return false;
			});



			$(function(){
                if(getCookie('usename')){
					var html = '<h2>你的最爱将在这里</h2>'+
                        '<div class="you_like">'+
                           ' <p>&nbsp;&nbsp;&nbsp;&nbsp;'+getCookie('usename')+'&nbsp;&nbsp;&nbsp;&nbsp;最喜欢的歌手</p>'+
                        '</div>'+
                       ' <a href="javascript:;" class="login">听你所爱</a>';
				$('.middle').html(html);
                    console.log($('.middle'));
                }else{
					var html= '<h2>万千歌手 近在眼前</h2>'+
                        '<div class="you_like">'+
                           ' <p>登录查看你的关注歌手</p>'+
                        '</div>'+
                       ' <a href="http://www.smilening.online/newqqmusic/html/login.html" class="login">立即登录</a>';
					   $('.middle').html(html);
				}
            })
	    </script>
</body>
</html>